<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>鞋垫各个压力点波形</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <h2 align="center">鞋垫各个压力点波形</h2>
        <div class="panel-body">
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>压力1波形</h4>
                    </div>
                    <div class="panel-body">
                        <div class="echarts" id="foot-1-wave"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>压力2波形</h4>
                    </div>
                    <div class="panel-body">
                        <div class="echarts" id="foot-2-wave"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>压力3波形</h4>
                    </div>
                    <div class="panel-body">
                        <div class="echarts" id="foot-3-wave"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4>压力4波形</h4>
                    </div>
                    <div class="panel-body">
                        <div class="echarts" id="foot-4-wave"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/js/sockjs.min.js}"></script>
<script th:src="@{/js/stomp.js}"></script>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<script type="text/javascript">
    var foot1waveNum = 0;
    var foot1waveDataX = [];
    var foot1waveData = [];
    var foot1waveLineChart;
    var foot2waveNum = 0;
    var foot2waveDataX = [];
    var foot2waveData = [];
    var foot2waveLineChart;
    var foot3waveNum = 0;
    var foot3waveDataX = [];
    var foot3waveData = [];
    var foot3waveLineChart;
    var foot4waveNum = 0;
    var foot4waveDataX = [];
    var foot4waveData = [];
    var foot4waveLineChart;
    $(function () {
        var foot1waveDivId = "foot-1-wave";
        foot1waveLineChart = createEchartLine(foot1waveDivId,foot1waveDataX,foot1waveData);

        var foot2waveDivId = "foot-2-wave";
        foot2waveLineChart = createEchartLine(foot2waveDivId,foot2waveDataX,foot2waveData);
        webSocket();

        var foot3waveDivId = "foot-3-wave";
        foot3waveLineChart = createEchartLine(foot3waveDivId,foot3waveDataX,foot3waveData);

        var foot4waveDivId = "foot-4-wave";
        foot4waveLineChart = createEchartLine(foot4waveDivId,foot4waveDataX,foot4waveData);
        webSocket();
    });
    function webSocket(){
        var stomp = null;
        var url = "https://sunfu.xdkdate.com/webSocket";
        // var url = "http://localhost:8009/webSocket"
        var socket = new SockJS(url);
        stomp = Stomp.over(socket);
        //连接
        stomp.connect({}, function (frame) {
            //订阅广播
            stomp.subscribe("/user/footwave/message", function (res) {
                var obj = eval('('+res.body+')');
                console.log(obj);
                foot1waveNum += 1;
                foot1waveDataX.push(foot1waveNum);
                foot1waveData.push(obj.foot1wave);
                foot1waveLineChart.setOption({
                    xAxis: {
                        data: foot1waveDataX
                    },
                    series: [
                        {
                            data: foot1waveData
                        }
                    ]
                });
                $(window).resize(foot1waveLineChart.resize);
                foot2waveNum += 1;
                foot2waveDataX.push(foot2waveNum);
                foot2waveData.push(obj.foot2wave);
                foot2waveLineChart.setOption({
                    xAxis: {
                        data: foot2waveDataX
                    },
                    series: [
                        {
                            data: foot2waveData
                        }
                    ]
                });
                $(window).resize(foot2waveLineChart.resize);
                foot3waveNum += 1;
                foot3waveDataX.push(foot3waveNum);
                foot3waveData.push(obj.foot3wave);
                foot3waveLineChart.setOption({
                    xAxis: {
                        data: foot3waveDataX
                    },
                    series: [
                        {
                            data: foot3waveData
                        }
                    ]
                });
                $(window).resize(foot3waveLineChart.resize);
                foot4waveNum += 1;
                foot4waveDataX.push(foot4waveNum);
                foot4waveData.push(obj.foot4wave);
                foot4waveLineChart.setOption({
                    xAxis: {
                        data: foot4waveDataX
                    },
                    series: [
                        {
                            data: foot4waveData
                        }
                    ]
                });
                $(window).resize(foot4waveLineChart.resize);
            });
        });
    }
    function createEchartLine(divId,dataX,data){
        var lineChart = echarts.init(document.getElementById(divId));
        var lineoption = {
            tooltip: {
                trigger: 'axis'
            },
            dataZoom: [
                {
                    show: true,
                    realtime: true,
                    start: 20,
                    end: 100
                },
                {
                    type: 'inside',
                    realtime: true,
                    start: 20,
                    end: 100
                }
            ],
            xAxis: {
                type: 'category',
                data: dataX
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: data,
                    type: 'line',
                    smooth: true,
                    showSymbol: false
                }
            ]
        };
        lineChart.setOption(lineoption);
        $(window).resize(lineChart.resize);
        return lineChart;
    }
</script>
</body>
</html>
